import React, { memo, useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom'
import { Image } from "antd"
import { RightOutlined, VideoCameraOutlined } from '@ant-design/icons'

// 导入 关于图片的 常量
import { PlaceholderImg, ImgError } from '../../../../../constant/local-constant'
import { getCount } from '../../../../../utils/format'
import { getMvTuijian } from '../../../../../api/mvApi'
import { MvBox } from './style'
export default memo(function Mv() {
  // state
  const [list, setList] = useState([])
  useEffect(() => {
    getMvTuijian().then(res => {
      setList(res.data)
    })
  }, [])
  return (
    <MvBox>
      <div className="wrap">
        <div className="title">
          <h2>精选MV</h2>
          <NavLink to="/" className="jiaobiao">
            更多<RightOutlined />
          </NavLink>
        </div>
        {/* 主体部分 */}
        <div className="main">

          {
            list.map((item) => {
              return (
                <div className="main_item" key={item.id}>
                  <a href="javasciprt:;">
                    <Image
                      width={224}
                      height={127}
                      src={item.cover}
                      preview={false}
                      fallback={ImgError}
                      placeholder={
                        <Image
                          preview={false}
                          width={224}
                          height={127}
                          src={PlaceholderImg}
                        />
                      }
                    />
                    <div className="main_item_pic_play"></div>
                  </a>
                  <div className="main_item_name one-txt-cut">{item.name}</div>
                  <div className="main_item_author one-txt-cut">{item.artistName}</div>
                  <div className="main_item_footer">
                    <VideoCameraOutlined />
                    <span >{getCount(item.playCount)}</span>
                  </div>
                </div>
              )
            })
          }



        </div>
      </div>
    </MvBox>
  )
})
